import { Button } from 'antd';

interface VideoPlayerProps {
  stream: MediaStream;
  isLocal?: boolean;
  userId?: string;
}

export const VideoPlayer: React.FC<VideoPlayerProps> = ({ 
  stream, 
  isLocal = false,
  userId 
}) => {
  const [needsManualPlay, setNeedsManualPlay] = useState(false);

  return (
    <div className="relative">
      {userId && (
        <div className="absolute top-2 left-2 bg-black/50 text-white px-2 py-1 rounded">
          {userId}
        </div>
      )}
      <video
        autoPlay
        playsInline
        muted={!isLocal}
        ref={(video) => {
          if (video) {
            video.srcObject = stream;
            if (!isLocal) {
              video.onloadedmetadata = () => {
                video.play().catch(() => setNeedsManualPlay(true));
              };
            }
          }
        }}
        className="w-full rounded-lg bg-black"
      />
      {needsManualPlay && (
        <Button
          onClick={() => {
            const video = document.querySelector("video");
            if (video) {
              video.play();
              setNeedsManualPlay(false);
            }
          }}
          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
        >
          点击播放视频
        </Button>
      )}
    </div>
  );
};
